<template>
    <div>
        <Tripline 
            :value="hotTrip" :tripTitle="tripTitle"
            :empty="empty" :isShow="isShow"
        ></Tripline>
    </div>
</template>

<script>
import Tripline from '../components/Tripline'
import {mapState} from "vuex"

export default {
    data:function(){
        return{
            tripTitle:"开元精选",
            isShow:false,
        }
    },
    components:{
        Tripline
    },
    methods:{
         back(){
            history.back();
        },
    },
    mounted:function(){
        this.$store.commit("resetHotpage");
        this.$store.dispatch("requestGoodTrip");
        var content =document.getElementById("content");
        content.onscroll=(e)=>{
            if(e.target.scrollTop>=e.target.scrollTopMax){
                this.isShow=true;
                setTimeout(function() {
                    this.$store.dispatch("requestMoreGoodTrip")
                    .then(data=>{
                        this.isShow=false;
                    })
                }.bind(this),700);
            }else{
                this.$store.commit("changeEmpty");
            }
        }
    },
    computed:{
        ...mapState([
            "hotTrip","empty"
        ])
    }
}
</script>

<style lang='css' scoped>
</style>